﻿{% extends "common/layout.html" %}
{% block css %}
    <link rel="stylesheet" href="{{ buildStaticUrl("/css/swiper-bundle.min.css") }}">
{% endblock %}
{% block content %}
    <section class="home">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="owl-carousel owl-theme slide" id="featured">
                        <div class="swiper" style="--swiper-theme-color:#FFFFFF">
                            {% if swiper %}
                                <div class="swiper-wrapper">
                                    {% for item in swiper %}
                                        <div class="swiper-slide">
                                            <div class="item">
                                                <article class="featured">
                                                    <div class="overlay"></div>
                                                    <figure>
                                                        <img src="{{ pic_path ~ item.hash~ ".jpg" }}"
                                                             alt="Sample Article">
                                                    </figure>
                                                    <div class="details">
                                                        <div class="category"><a
                                                                href="category.html">{{ item.genres }}</a></div>
                                                        <h1>
                                                            <a href="{{ buildUrl("single")~"?id="~item.id }}">{{ item.title }}</a>
                                                        </h1>
                                                        <div class="time">{{ item.date }}</div>
                                                    </div>
                                                </article>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            {% endif %}
                            <!-- 如果需要导航按钮 -->
                            <div class="swiper-button-prev"></div>
                            <div class="swiper-button-next"></div>
                        </div>
                    </div>
                    <div class="line">
                        <div>Latest News</div>
                    </div>
                    {% if newsL %}
                        <div class="row">
                            {% for item in newsL %}
                                <article class="col-md-12 article-list">
                                    <div class="inner">
                                        <figure>
                                            <a href="{{ buildUrl("single")~"?id="~item.id }}">
                                                <img src="{{ pic_path ~ item.hash~ ".jpg" }}" height="195" width="300"
                                                     alt="Sample Article">
                                            </a>
                                        </figure>
                                        <div class="details">
                                            <div class="detail">
                                                <div class="category">
                                                    <a href="#">{{ item.genres }}</a>
                                                </div>
                                                <div class="time">{{ item.date }}</div>
                                            </div>
                                            <h1><a href="{{ buildUrl("single")~"?id="~item.id }}">{{ item.title }}</a>
                                            </h1>
                                            <p>
                                                {{ (item.text | truncate_html(length=150)) ~ '...' }}
                                            </p>
                                            <footer>
                                                <a class="btn btn-primary more"
                                                   href="{{ buildUrl("single")~"?id="~item.id }}">
                                                    <div>More</div>
                                                    <div><i class="ion-ios-arrow-thin-right"></i></div>
                                                </a>
                                            </footer>
                                        </div>
                                    </div>
                                </article>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            </div>
            {% include "common/pagenation.html" %}
        </div>
    </section>

{% endblock %}
{% block js %}
    <script src="{{ buildStaticUrl("/js/swiper-bundle.min.js") }}"></script>
    <script>
        var mySwiper = new Swiper('.swiper', {
            loop: true, // 循环模式选项

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            autoplay: {
                delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: true,
            }
        })
    </script>
{% endblock %}

